<template>
  <div class="look-down-wrap">
    <!-- <el-row :gutter="20">
      <el-col :span="8" style="padding: 0"> -->
    <div class="file-item" @click="handleClick(2)" v-if="showModule('img')">
      <i class="el-icon-picture"></i>
      <p>
        <span v-show="txtShow" :title="showModuleName('img') || '图片'">
          {{ showModuleName('img') || '图片' }}
        </span>
        {{ imgCount }}
      </p>
    </div>
    <!-- </el-col>
      <el-col :span="8" style="padding: 0"> -->
    <div class="file-item" @click="handleClick(3)" v-if="showModule('video')">
      <i class="el-icon-video-camera-solid"></i>
      <p>
        <span v-show="txtShow" :title="showModuleName('video') || '视频'">
          {{ showModuleName('video') || '视频' }}
        </span>
        {{ videoCount }}
      </p>
    </div>
    <!-- </el-col>
      <el-col :span="8" style="padding: 0"> -->
    <div class="file-item" @click="handleClick(1)" v-if="showModule('text')">
      <i class="el-icon-s-order"></i>
      <p>
        <span v-show="txtShow" :title="showModuleName('text') || '文本'">
          {{ showModuleName('text') || '文本' }}
        </span>
        {{ txtCount }}
      </p>
    </div>
    <!-- </el-col>
    </el-row> -->
    <!-- <ul>
      <li @click="handleClick(2)" v-if="showModule('img')">
        <i class="el-icon-picture"></i>
        <p>
          <span v-show="txtShow" :title="showModuleName('img') || '图片'">
            {{ showModuleName('img') || '图片' }}
          </span>
          {{ imgCount }}
        </p>
      </li>
      <li @click="handleClick(3)" v-if="showModule('video')">
        <i class="el-icon-video-camera-solid"></i>
        <p>
          <span v-show="txtShow" :title="showModuleName('video') || '视频'">
            {{ showModuleName('video') || '视频' }}
          </span>
          {{ videoCount }}
        </p>
      </li>
      <li @click="handleClick(1)" v-if="showModule('text')">
        <i class="el-icon-s-order"></i>
        <p>
          <span v-show="txtShow" :title="showModuleName('text') || '文本'">
            {{ showModuleName('text') || '文本' }}
          </span>
          {{ txtCount }}
        </p>
      </li>
    </ul> -->
  </div>
</template>
<script>
import { setSession } from '@/utils/session'
import homeConfig from '@/mixins/homeConfig'
export default {
  mixins: [homeConfig],
  data() {
    return {
      txtShow: true,
      txtCount: 0,
      imgCount: 0,
      videoCount: 0,
    }
  },
  props: ['data', 'fileType'],
  mounted() {
    this.init()
  },
  methods: {
    handleClick(type) {
      if (this.fileType) {
        setSession('fileType', type)
      }
    },
    init() {
      if (this.data.count > 0) {
        this.txtCount = this.data.fileVOList.filter((v) => v.type == 1)[0].num
        this.imgCount = this.data.fileVOList.filter((v) => v.type == 2)[0].num
        this.videoCount = this.data.fileVOList.filter((v) => v.type == 3)[0].num
      }
    },
  },
}
</script>

<style scoped lang="scss" >
.look-down-wrap {
  display: inline-block;
  height: 24px;
  .file-item {
    float: left;
    line-height: 24px;
    margin-right: 8px;
    font-size: 14px;
    cursor: pointer;
    // max-width: 30%;
    overflow: hidden;
    height: 24px;
    i {
      color: #666;
      font-size: 16px;
      float: left;
      margin-top: 4px;
      font-weight: bold;
      &.el-icon-picture {
        color: #f56c6c;
      }
      &.el-icon-video-camera-solid {
        color: #e6a23c;
      }
      &.el-icon-s-order {
        color: #67c23a;
      }
    }
    p {
      display: inline;
      margin-left: 4px;
      color: #666;
      span {
        margin-left: 5px;
        float: left;
        max-width: 3em;
        overflow: hidden;
        height: 24px;
      }
    }
  }
  ul {
    li {
      float: left;
      line-height: 24px;
      margin-right: 10px;
      font-size: 14px;
      cursor: pointer;
      max-width: 30%;
      overflow: hidden;
      height: 24px;
      i {
        color: #666;
        font-size: 16px;
        float: left;
        margin-top: 5px;
        font-weight: bold;
        &.el-icon-picture {
          color: #f56c6c;
        }
        &.el-icon-video-camera-solid {
          color: #e6a23c;
        }
        &.el-icon-s-order {
          color: #67c23a;
        }
      }
      p {
        display: inline;
        margin-left: 4px;
        color: #666;
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  .look-down-wrap ul li {
    margin-right: 8px;
  }
}
</style>